<template>
  <a-tabs :size="size">
    <a-tab-pane key="config" tab="配置">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="节点名称">
              <a-input placeholder="请输入节点名称" :size="size" :defaultValue="cell.value" @change="(e) => (cell.value = e.target.value)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="流转特性">
              <a-select
                :size="size"
                :defaultValue="getCellValue(props, 'exception-flow', '0')"
                @change="(val) => setCellValue(props, 'exception-flow', val)"
              >
                <a-select-option value="0">直接流转</a-select-option>
                <a-select-option value="1">当出现异常流转</a-select-option>
                <a-select-option value="2">未出现异常流转</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="流转特性">
              <SpiderSelect :editor="editor" :cell="cell" :options="selectConfig" />
            </a-form-item>
          </a-col>
          <a-col :span="24" ref="condition">
            <a-form-item label="流转条件" :labelCol="{ span: direction == 'bottom' ? 2 : 5 }" :wrapperCol="{ span: direction == 'bottom' ? 21 : 17 }">
              <a-input
                placeholder="请输入流转条件"
                :size="size"
                :defaultValue="getCellValue(props, 'condition')"
                @change="(e) => setCellValue(props, 'condition', e)"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="线粗细">
              <a-input-number
                :size="size"
                :min="1"
                :max="10"
                :defaultValue="getCellValue(props, 'lineWidth', 2)"
                @change="(e) => changeLineWidth('lineWidth', e)"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="线样式">
              <a-select :size="size" :defaultValue="getCellValue(props, 'line-style', 'sharp')" @change="(val) => changeLineStyle('line-style', val)">
                <a-select-option value="sharp">Sharp</a-select-option>
                <a-select-option value="rounded">Rounded</a-select-option>
                <a-select-option value="curved">Curved</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="线颜色">
              <a-input
                placeholder="请输入颜色:#cccccc"
                :size="size"
                :defaultValue="getCellValue(props, 'lineColor', 'black')"
                @change="(e) => changeLineColor('lineColor', e)"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import SpiderSelect from '../components/spiderSelect.vue';
  import { setCellValue, getCellValue } from '../utils/tools';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const formItemLayout = reactive({
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
    colSpan: 8,
  });
  const selectConfig = ref([
    {
      label: '传递变量',
      value: 'transmit-variable',
      defaultVal: '1',
    },
  ]);
  const condition = ref();
  // 改变线条粗细
  function changeLineWidth(key, e) {
    let val = setCellValue(props, key, e);
    props.editor.graph.setCellStyles('strokeWidth', val, [props.cell]);
  }
  // 改变线条样式
  function changeLineStyle(key, e) {
    let val = setCellValue(props, key, e);
    props.editor.graph.setCellStyles('sharp', undefined, [props.cell]);
    props.editor.graph.setCellStyles('rounded', undefined, [props.cell]);
    props.editor.graph.setCellStyles('curved', undefined, [props.cell]);
    props.editor.graph.setCellStyles(val, 1, [props.cell]);
  }
  // 改变线条颜色
  function changeLineColor(key, e) {
    let val = setCellValue(props, key, e);
    props.editor.graph.setCellStyles('strokeColor', val, [props.cell]);
  }
  defineExpose({
    condition,
  });
</script>
